<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('测点月统计同比图例')" />
	<style type="text/css">
		.bootstrap-table .table thead>tr>th {
		    padding: 0;
		    margin: 0;
		    background-color: #EFF3F8;
		}
	</style>
</head>
<body class="gray-bg">
	<input type="hidden" name="tagid" id="tagid" th:field="*{data.tagid}"/>
	<input type="hidden" name="identify" id="identify" th:field="*{data.identify}"/>
	
	<div class="row  border-bottom white-bg dashboard-header">
        <div class="col-sm-12">
            <div class="select-list">
            	<ul>
            		<li class="select-time">
		              <p>同比日期：</p>
		              <input type="text" class="form-control" id="startDate" name="startDate" th:field="*{data.startDate}" readonly="readonly" style="width:150px;"/>
		              <span> 与 </span>
		              <input type="text" class="form-control" id="endDate" name="endDate" th:field="*{data.endDate}" readonly="readonly" style="width:150px;"/>
		            </li>
		            <li>
									<button type="button" class="btn btn-primary btn-sm" style="width:100px;" onclick="bidui()">比对</button>
								</li>
            	</ul>
            </div>
        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>测点（<span th:text="${data.tagname}"></span>）月统计同比图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="mychart" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
	            <div class="ibox float-e-margins">
		            <div class="ibox-title">
		              <h5>测点（<span th:text="${data.tagname}"></span>）月统计同比数据列表</h5>
		            </div>
		            <div class="ibox-content table-bordered">
									<table id="bootstrap-table"></table>
								</div>
							</div>
						</div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
	    $(function () {
	    	layui.use('laydate', function(){
     		  var laydate = layui.laydate;
     		  
     		  laydate.render({
     		    elem: '#startDate',
     		    type: 'month'
     		  });
     		 	laydate.render({
     		    elem: '#endDate',
     		    type: 'month'
     		  });
	      });
	    	
	    	bidui();
	    	
	    	$('#table').bootstrapTable({
	    	    columns: [{
	    	    	"title": '日期1',
	    	    },
	    	    {
	    	    	"title": '日期2',
	    	    },
	    	    {
	    	    	"title": '日期3',
	    	    },
	    	    {
	    	    	"title": '日期4',
	    	    }],
	    	    data: [],
	    	    theadClasses: "thead-dark",//这里设置表头样式
	    	    height:400 
	    	});
	    });
	    
	    // 比对事件
	    function bidui() {
	    	var startDate = $("#startDate").val();
	    	var endDate = $("#endDate").val();
	    	var tagid = $("#tagid").val();
	    	var identify = $("#identify").val();
	    	var url = ctx + "overrun/tagmonth/tbchart?tagid="+tagid+"&startDate="+startDate+"&endDate="+endDate+"&identify="+identify;
	    	
	    	$.get(url, function(res) {
	    		drawChart(res.tjdate1, res.tjdate2, res.xdata, res.ydata1, res.ydata2);
	    		drawTable(res.xdata, res.listdata);
	    	});
	    }
	    
	    // 表格显示
	    function drawTable(xdata, listdata) {
	    	var columnsArray = [];
	    	var columnsSub1 = [];
	    	var columnsSub2 = [];
	    	
	    	columnsSub1.push({
          "title": '日期',
          "field": 'tjdate',
          "align": 'center',
        	"valign":"middle",
          "colspan": 1,
          "rowspan": 2
        });
	    	
	    	$(xdata).each(function(index, data) {
	    		columnsSub1.push({
 	          "title": data,
 	          "align": 'center',
 	          "colspan": 2
 	        });
	    		
	    		columnsSub2.push({
 	          "title": "时长 (分)",
 	         	"field": 'times'+index,
 	          "align": 'center'
 	        });
	    		
	    		columnsSub2.push({
 	          "title": "次数",
 	         	"field": 'counts'+index,
 	          "align": 'center'
 	        });
	    	});
	    	
	    	columnsArray.push(columnsSub1);
	    	columnsArray.push(columnsSub2);
	    	
	    	$('#bootstrap-table').bootstrapTable('destroy').bootstrapTable({
	    		data: listdata,
          columns: columnsArray
        });
	    }
	    
	    // 画图
	    function drawChart(date1, date2, xdata, ydata1, ydata2) {
	    	var labelOption = {
          normal: {
            show: true,
            position: 'top',
            fontSize: 12
          }
        };
	    	
	    	var mychart = echarts.init(document.getElementById("mychart"));
	    	mychart.clear();
        var option = {
       		color: ['#e5323e', '#26A65B'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: [date1, date2]
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              name: '轮值',
              axisTick: {show: true},
              data: xdata
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '时长（分）'
            }
          ],
          series: [
            {
              name: date1,
              type: 'bar',
              barGap: 0,
              label: labelOption,
              barWidth : 50,//柱图宽度
              data: ydata1
            },
            {
              name: date2,
              type: 'bar',
              label: labelOption,
              barWidth : 50,//柱图宽度
              data: ydata2
            }
          ]
       	};
        mychart.setOption(option);

        window.onresize = mychart.resize;
	    }
    </script>
</body>
</html>